/** 
 * 学习目标：多表单元素的优化
问题：每个表单元素都需要一个单独的事件处理程序，处理太繁琐

优化：使用一个事件处理程序处理多个表单元素

步骤

 + 给表单元素添加name属性，名称与state属性名相同
 + 根据表单元素类型获取对应的值
 + 在事件处理程序中通过`[name]`修改对应的state
 * */
import React from "react";

export default class App extends React.Component {
    state = {
        usernmae: '',
        desc: '',
        city: "2",
        isSingle: true
    };

    render() {
        const { usernmae, desc, city, isSingle } = this.state;
        return (
            < >
                <input type="text" name="usernmae" value={usernmae} onChange={this.handleClick} />
                <br />
                描述：<textarea name="desc" value={desc} onChange={this.handleClick}></textarea>
                <br />
                城市：
                <select value={city} name="city" onChange={this.handleClick}>
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                    <option value="3">广州</option>
                    <option value="4">深圳</option>
                </select>
                <br />
                是否单身：
                <input type="checkbox" name="isSingle" checked={isSingle} onChange={this.handleClick} />
            </ >
        );
    }
    handleClick = (e) => {
        // 解构
        const { name, type, value, checked } = e.target
        this.setState({
            [name]: type === 'checkbox' ? checked : value
        })
    }
    // anfn 快速生成箭头函数

}